
<!DOCTYPE html>
<html lang="en" class="loading">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>“响应式布局常用解决方案” - Bittersweet.的博客</title>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="google" content="notranslate" />
    <meta name="keywords" content="bittersweet,"> 
    <meta name="description" content="我在学校里做的一些项目，以及遇到的问题的解决方法，希望为有需要的人提供帮助,前言：前端开发常用的自适应方法如下：


Px和视口
媒体查询
百分比
自适应场景下的rem解决方案
通过Vw&amp;#x2F;Vh来实现自适应


css3新单位以及响应式布局单位详解1.rem：
​	,"> 
    <meta name="author" content="Bittersweet.(姚亮)"> 
    <link rel="alternative" href="atom.xml" title="Bittersweet.的博客" type="application/atom+xml"> 
    <link rel="icon" href="/Bittersweet/img/favicon.ico"> 
    
    <meta name="twitter:image:src" content="https://bangdream.moe/img/ident.png"/>
    <meta name="twitter:creator" content="@yourtwitteridhere"/>
    <meta name="twitter:card" content="summary_large_image"/>
    <meta name="twitter:title" content="“响应式布局常用解决方案” - Bittersweet.的博客"/>
    <meta name="twitter:description" content="我在学校里做的一些项目，以及遇到的问题的解决方法，希望为有需要的人提供帮助,前言：前端开发常用的自适应方法如下：


Px和视口
媒体查询
百分比
自适应场景下的rem解决方案
通过Vw&amp;#x2F;Vh来实现自适应


css3新单位以及响应式布局单位详解1.rem：
​	,"/>
    <meta property="og:image" content="https://bangdream.moe/img/ident.png"/>
    <meta property="og:image:alt" content="我在学校里做的一些项目，以及遇到的问题的解决方法，希望为有需要的人提供帮助,前言：前端开发常用的自适应方法如下：


Px和视口
媒体查询
百分比
自适应场景下的rem解决方案
通过Vw&amp;#x2F;Vh来实现自适应


css3新单位以及响应式布局单位详解1.rem：
​	,"/>
    <meta property="og:image:width" content="1200"/>
    <meta property="og:image:height" content="600"/>
    <meta property="og:site_name" content="Bittersweet.的博客"/>
    <meta property="og:type" content="object"/>
    <meta property="og:title" content="“响应式布局常用解决方案” - Bittersweet.的博客"/>
    <meta property="og:description" content="我在学校里做的一些项目，以及遇到的问题的解决方法，希望为有需要的人提供帮助,前言：前端开发常用的自适应方法如下：


Px和视口
媒体查询
百分比
自适应场景下的rem解决方案
通过Vw&amp;#x2F;Vh来实现自适应


css3新单位以及响应式布局单位详解1.rem：
​	,"/>
    
<link rel="stylesheet" href="/Bittersweet/css/diaspora.css">

    <script>window.searchDbPath = "/Bittersweet/search.xml";</script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">
<meta name="generator" content="Hexo 6.3.0"></head>

<body class="loading">
    <span id="config-title" style="display:none">Bittersweet.的博客</span>
    <div id="loader"></div>
    <div id="single">
    <div id="top" style="display: block;">
    <div class="bar" style="width: 0;"></div>
    <a class="iconfont icon-home image-icon" href="javascript:;" data-url="http://gitee.com/yao-liang-8848"></a>
    <div title="播放/暂停" class="iconfont icon-play"></div>
    <h3 class="subtitle">“响应式布局常用解决方案”</h3>
    <div class="social">
        <div>
            <div class="share">
                <a title="获取二维码" class="iconfont icon-scan" href="javascript:;"></a>
            </div>
            <div id="qr"></div>
        </div>
    </div>
    <div class="scrollbar"></div>
</div>

    <div class="section">
        <div class="article">
    <div class='main'>
        <h1 class="title">“响应式布局常用解决方案”</h1>
        <div class="stuff">
            <span>十一月 30, 2022</span>
            
  <ul class="post-tags-list" itemprop="keywords"><li class="post-tags-list-item"><a class="post-tags-list-link" href="/Bittersweet/tags/css3/" rel="tag">css3</a></li><li class="post-tags-list-item"><a class="post-tags-list-link" href="/Bittersweet/tags/%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80/" rel="tag">响应式布局</a></li><li class="post-tags-list-item"><a class="post-tags-list-link" href="/Bittersweet/tags/%E6%95%99%E5%AF%BC%E6%96%87%E7%AB%A0/" rel="tag">教导文章</a></li></ul>


        </div>
        <div class="content markdown">
            <p><strong>前言：前端开发常用的自适应方法如下：</strong></p>
<blockquote>
<ul>
<li>Px和视口</li>
<li>媒体查询</li>
<li>百分比</li>
<li>自适应场景下的rem解决方案</li>
<li>通过Vw&#x2F;Vh来实现自适应</li>
</ul>
</blockquote>
<h1 id="css3新单位以及响应式布局单位详解"><a href="#css3新单位以及响应式布局单位详解" class="headerlink" title="css3新单位以及响应式布局单位详解"></a>css3新单位以及响应式布局单位详解</h1><h2 id="1-rem："><a href="#1-rem：" class="headerlink" title="1.rem："></a>1.rem：</h2><blockquote>
<p>​	<strong>rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。 因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可。</strong></p>
</blockquote>
<h3 id="优点："><a href="#优点：" class="headerlink" title="优点："></a>优点：</h3><p>​		rem布局可以实现响应式布局，他以根元素html的fontsize来决定大小，这是动态的，他跟px可以通过计算相互转换，下载插件后就不用自己计算了</p>
<h3 id="缺点："><a href="#缺点：" class="headerlink" title="缺点："></a>缺点：</h3><p>​	<em><strong>在响应式布局中，必须通过js来动态控制根元素font-size的大小。</strong></em></p>
<h2 id="2-媒体查询："><a href="#2-媒体查询：" class="headerlink" title="2.媒体查询："></a>2.媒体查询：</h2><blockquote>
<p>使用@media媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果。举例来说：</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 960px<span class="token punctuation">)</span></span><span class="token punctuation">&#123;</span>
    <span class="token selector">body</span><span class="token punctuation">&#123;</span>
      <span class="token property">background-color</span><span class="token punctuation">:</span>#FF6699
    <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>

<span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 768px<span class="token punctuation">)</span></span><span class="token punctuation">&#123;</span>
    <span class="token selector">body</span><span class="token punctuation">&#123;</span>
      <span class="token property">background-color</span><span class="token punctuation">:</span>#00FF66<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>

<span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 550px<span class="token punctuation">)</span></span><span class="token punctuation">&#123;</span>
    <span class="token selector">body</span><span class="token punctuation">&#123;</span>
      <span class="token property">background-color</span><span class="token punctuation">:</span>#6633FF<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>

<span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 320px<span class="token punctuation">)</span></span><span class="token punctuation">&#123;</span>
    <span class="token selector">body</span><span class="token punctuation">&#123;</span>
      <span class="token property">background-color</span><span class="token punctuation">:</span>#FFFF00<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p><strong>上述的代码通过媒体查询定义了几套样式，通过max-width设置样式生效时的最大分辨率，上述的代码分别对分辨率在0～320px，320px～550px，550px～768px以及768px～960px的屏幕设置了不同的背景颜色。</strong></p>
</blockquote>
<h3 id="优点"><a href="#优点" class="headerlink" title="优点"></a>优点</h3><p>通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片。比如给小屏幕手机设置@2x图，为大屏幕手机设置@3x图，通过媒体查询就能很方便的实现。</p>
<h3 id="缺点"><a href="#缺点" class="headerlink" title="缺点"></a>缺点</h3><p>媒体查询的缺点也很明显，如果在浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。</p>
<h2 id="3-百分比"><a href="#3-百分比" class="headerlink" title="3.百分比"></a>3.百分比</h2><blockquote>
<p>（1）子元素height和width的百分比</p>
<p>子元素的height或width中使用百分比，是相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height。比如：</p>
<p>style为： .father{ width:200px; height:100px; } .child{ width:50%; height:50%; }</p>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>parent<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>child<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<p><img src="http://bittersweetyao.gitee.io/pic/pic/%E7%99%BE%E5%88%86%E6%AF%941.png"></p>
<p>(2) top和bottom 、left和right</p>
<p>子元素的top和bottom如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度，同样</p>
<p>子元素的left和right如果设置百分比，则相对于直接非static定位(默认定位的)父元素的宽度。</p>
<p>3）padding,margin</p>
<p><strong>子元素的padding和margin如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。</strong></p>
<p>如下面的这个典型应用，做出一个长宽恒定比例的长方形</p>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">.trangle</span><span class="token punctuation">&#123;</span>
  <span class="token property">height</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span>
  <span class="token property">padding-top</span><span class="token punctuation">:</span>55%<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>9<span class="token punctuation">,</span> 122<span class="token punctuation">,</span> 166<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>trangle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p><img src="http://bittersweetyao.gitee.io/pic/pic/%E7%99%BE%E5%88%86%E6%AF%94%E9%95%BF%E6%96%B9%E5%BD%A2.png"></p>
</blockquote>
<h3 id="优点-1"><a href="#优点-1" class="headerlink" title="优点"></a>优点</h3><p>​	灵活好用，可以用在很多场景，兼容性页不错</p>
<h3 id="缺点-1"><a href="#缺点-1" class="headerlink" title="缺点"></a>缺点</h3><p>（1）计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。 </p>
<p>（2）从上面的例子可以看出，各个属性中如果使用百分比，相对父元素的属性并不是唯一的。比如width和height相对于父元素的width和height，而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等，造成我们使用百分比单位容易使布局问题变得复杂。</p>
<h2 id="css3新单位vw、vh、vmin、vmax"><a href="#css3新单位vw、vh、vmin、vmax" class="headerlink" title="css3新单位vw、vh、vmin、vmax"></a>css3新单位vw、vh、vmin、vmax</h2><blockquote>
<p><strong>1.含义：vw、vh、vmin、vmax是一种视窗单位，也是相对单位。 它相对的不是父节点或者页面的根节点。 而是由视窗（Viewport）大小来决定的，单位1，代表类似于1%。</strong>**</p>
<p>视窗( <strong>Viewport</strong>)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。</p>
<p>2.具体描述：</p>
<ol>
<li><p><strong>vw</strong>：视窗<strong>宽度</strong>的百分比（1vw 代表视窗的宽度为 1%）</p>
</li>
<li><p><strong>vh：</strong>视窗<strong>高度</strong>的百分比（1vh 代表视窗的宽度为 1%）</p>
</li>
<li><p><strong>vmin</strong>：当前 <strong>vw</strong> 和 <strong>vh</strong> 中较小的一个值</p>
</li>
<li><p><strong>vmax</strong>：当前 <strong>vw</strong> 和 <strong>vh</strong> 中较大的一个值</p>
<p>3.vmin，vmax的用处</p>
<p>做移动页面开发时，如果使用 <strong>vw</strong>、 <strong>wh</strong> 设置字体大小（比如 <strong>5vw</strong>），在竖屏和横屏状态下显示的字体大小是不一样的。</p>
<p>由于<strong>vmin</strong>和<strong>vmax</strong>是当前较小的<strong>vw</strong>和<strong>vh</strong>和当前较大的<strong>vw</strong>和<strong>vh</strong>。 这里就可以用到<strong>vmin</strong>和<strong>vmax</strong>。 使得文字大小在横竖屏下保持一致</p>
<p><strong>视窗（Viewport）单位除了可以用来设置元素的宽高尺寸，也可以在文本中使用。 下面使用vw设置字体大小来实现响应式文字</strong></p>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
    <span class="token selector">html,
    body,
    div,
    span,
    h1,
    h2,
    h3</span> <span class="token punctuation">&#123;</span>
        <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
        <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
        <span class="token property">border</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>

    <span class="token selector">.demo</span> <span class="token punctuation">&#123;</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 100vw<span class="token punctuation">;</span>
        <span class="token property">font-size</span><span class="token punctuation">:</span> 5vw<span class="token punctuation">;</span>
        <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> #1781ba<span class="token punctuation">;</span>
        <span class="token property">color</span><span class="token punctuation">:</span> #FFF<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>

    <span class="token selector">.demo2</span> <span class="token punctuation">&#123;</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 90vw<span class="token punctuation">;</span>
        <span class="token property">font-size</span><span class="token punctuation">:</span> 5vw<span class="token punctuation">;</span>
        <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> #07b06f<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>

    <span class="token selector">.demo3</span> <span class="token punctuation">&#123;</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 50vw<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 50vh<span class="token punctuation">;</span>
        <span class="token property">font-size</span><span class="token punctuation">:</span> 1vw<span class="token punctuation">;</span>
        <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> #cb2b70<span class="token punctuation">;</span>
        <span class="token property">color</span><span class="token punctuation">:</span> #FFF<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>宽度100%，字体5%<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>宽度80％, 字体5％<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>宽度50％, 高度50％, 字体1％<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p><img src="http://bittersweetyao.gitee.io/pic/pic/rem1.png"></p>
</li>
</ol>
</blockquote>
<h1 id="vh-x2F-vw布局与百分比布局区别"><a href="#vh-x2F-vw布局与百分比布局区别" class="headerlink" title="vh&#x2F;vw布局与百分比布局区别"></a>vh&#x2F;vw布局与百分比布局区别</h1><blockquote>
<p>（1） <strong>%</strong> 是相对于父元素的大小设定的比率， <strong>vw</strong>、 <strong>vh</strong> 是视窗大小决定的。</p>
<p>（2） <strong>vw</strong>、 <strong>vh</strong> 优势在于能够直接获取高度，而用 <strong>%</strong> 在没有设置 <strong>body</strong> 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势</p>
</blockquote>

            <!--[if lt IE 9]><script>document.createElement('audio');</script><![endif]-->
            <audio id="audio" loop="1" preload="auto" controls="controls" data-autoplay="false">
                <source type="audio/mpeg" src="">
            </audio>
            
                <ul id="audio-list" style="display:none">
                    
                        
                            <li title="0" data-url="http://link.hhtjim.com/163/425570952.mp3"></li>
                        
                    
                        
                            <li title="1" data-url="http://link.hhtjim.com/163/425570952.mp3"></li>
                        
                    
                </ul>
            
        </div>
        
        
    <div id="gitalk-container" class="comment link"
		data-enable="false"
        data-ae="false"
        data-ci=""
        data-cs=""
        data-r=""
        data-o=""
        data-a=""
        data-d="false"
    >查看评论</div>


    </div>
    
        <div class="side">
            <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#css3%E6%96%B0%E5%8D%95%E4%BD%8D%E4%BB%A5%E5%8F%8A%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80%E5%8D%95%E4%BD%8D%E8%AF%A6%E8%A7%A3"><span class="toc-number">1.</span> <span class="toc-text">css3新单位以及响应式布局单位详解</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-rem%EF%BC%9A"><span class="toc-number">1.1.</span> <span class="toc-text">1.rem：</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BC%98%E7%82%B9%EF%BC%9A"><span class="toc-number">1.1.1.</span> <span class="toc-text">优点：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BC%BA%E7%82%B9%EF%BC%9A"><span class="toc-number">1.1.2.</span> <span class="toc-text">缺点：</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2%EF%BC%9A"><span class="toc-number">1.2.</span> <span class="toc-text">2.媒体查询：</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BC%98%E7%82%B9"><span class="toc-number">1.2.1.</span> <span class="toc-text">优点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BC%BA%E7%82%B9"><span class="toc-number">1.2.2.</span> <span class="toc-text">缺点</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E7%99%BE%E5%88%86%E6%AF%94"><span class="toc-number">1.3.</span> <span class="toc-text">3.百分比</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BC%98%E7%82%B9-1"><span class="toc-number">1.3.1.</span> <span class="toc-text">优点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BC%BA%E7%82%B9-1"><span class="toc-number">1.3.2.</span> <span class="toc-text">缺点</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#css3%E6%96%B0%E5%8D%95%E4%BD%8Dvw%E3%80%81vh%E3%80%81vmin%E3%80%81vmax"><span class="toc-number">1.4.</span> <span class="toc-text">css3新单位vw、vh、vmin、vmax</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#vh-x2F-vw%E5%B8%83%E5%B1%80%E4%B8%8E%E7%99%BE%E5%88%86%E6%AF%94%E5%B8%83%E5%B1%80%E5%8C%BA%E5%88%AB"><span class="toc-number">2.</span> <span class="toc-text">vh&#x2F;vw布局与百分比布局区别</span></a></li></ol>
        </div>
    
</div>


    </div>
</div>
<script src="/Bittersweet/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/Bittersweet/live2dw/assets/assets/koharu.model.json"},"display":{"position":"right","width":200,"height":400},"mobile":{"show":true},"react":{"opacity":0.8},"log":false});</script></body>


<script src="//lib.baomitu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="/Bittersweet/js/plugin.js"></script>
<script src="/Bittersweet/js/typed.js"></script>
<script src="/Bittersweet/js/diaspora.js"></script>


<link rel="stylesheet" href="/Bittersweet/photoswipe/photoswipe.css">
<link rel="stylesheet" href="/Bittersweet/photoswipe/default-skin/default-skin.css">


<script src="/Bittersweet/photoswipe/photoswipe.min.js"></script>
<script src="/Bittersweet/photoswipe/photoswipe-ui-default.min.js"></script>


<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>
    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">
        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <!--  Controls are self-explanatory. Order can be changed. -->
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>



<script type="text/x-mathjax-config">
    MathJax.Hub.Config({"HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"], linebreaks: { automatic:true }, EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50) },
        tex2jax: { inlineMath: [ ["$", "$"], ["\\(","\\)"] ], processEscapes: true, ignoreClass: "tex2jax_ignore|dno",skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']},
        TeX: {  noUndefined: { attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "90%" } }, Macros: { href: "{}" } },
        messageStyle: "none"
    });
</script>
<script type="text/x-mathjax-config">
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for(i=0; i < all.length; i += 1) {
            all[i].SourceElement().parentNode.className += ' has-jax';
        }
    });
</script>

<script async type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">
</script>




</html>
